<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />
    <meta name="format-detection" content="telephone=no" />
    <title>缴费记录</title>
    <link rel="stylesheet" href="../css/layout.css" />
    <link rel="stylesheet" href="../css/common.css" />
  </head>
  <body>
    <div id="app">
      <div class="home_container"></div>
      <!-- 头部 -->
      <header class="header">
        <div class="navigation">
          <a href="index.html">
            <img id="nav-back" src="../images/xy/back-icon.png" />
          </a>
        </div>
        <div class="logo">
          <div class="logo-text">缴费记录</div>
        </div>
      </header>
      <!-- 搜索区域 -->
      <div class="search-wrap">
        <span class="search-text">输入卡号</span>
        <div class="search-contanier">
          <input type="text" placeholder="请输入" />
          <div class="search-contanier-btn">搜索</div>
        </div>
      </div>
      <!-- 列表区域 -->
      <ul id="list-wrap">
        <li class="list-item" v-for="(item,index) in list" :key="index">
          <div class="item-status">
            <img
              src="../images/xy/daishenhe.png"
              alt=""
              v-if='item.status=="待审核"'
            />
            <img
              src="../images/xy/confirm.png"
              alt=""
              v-if='item.status=="已确认"'
            />
            <img
              src="../images/xy/bohui.png"
              alt=""
              v-if='item.status=="驳回"'
            />
            <span>{{item.status}}</span>
          </div>
          <div class="item-middle">
            <div class="middle-line">
              <span class="title">{{item.name}}</span>
              <div>
                ￥<span class="item-price">{{item.price}}</span>/{{item.year}}年
              </div>
            </div>
            <span class="time">{{item.time}}</span>
            <div v-if='item.status=="驳回"' class="turn-down">
              <span class="title">驳回理由:</span>
              <span style="line-height: 0.32rem">
                内容内容内容内容内容内容内容内容内容内容内 内容内容内容
              </span>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <script src="../js/normal.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../js/vue_resource.js"></script>
  </body>
  <script>
    new Vue({
      el: "#app", //el用于指定当前Vue实例为哪个容器服务，值通常为选择器字符串。
      data: function () {
        return {
          list: [
            {
              name: "有线电视续费",
              price: "252",
              year: 1,
              time: "2023年12月13日 12:00:00",
              status: "待审核",
            },
            {
              name: "有线电视续费",
              price: "252",
              year: 1,
              time: "2023年12月13日 12:00:00",
              status: "已确认",
            },
            {
              name: "有线电视续费",
              price: "252",
              year: 1,
              time: "2023年12月13日 12:00:00",
              status: "驳回",
            },
            {
              name: "有线电视续费",
              price: "252",
              year: 1,
              time: "2023年12月13日 12:00:00",
              status: "待审核",
            },
            {
              name: "有线电视续费",
              price: "252",
              year: 1,
              time: "2023年12月13日 12:00:00",
              status: "已确认",
            },
            {
              name: "有线电视续费",
              price: "252",
              year: 1,
              time: "2023年12月13日 12:00:00",
              status: "驳回",
            },
            {
              name: "有线电视续费",
              price: "252",
              year: 1,
              time: "2023年12月13日 12:00:00",
              status: "已确认",
            },
            {
              name: "有线电视续费",
              price: "252",
              year: 1,
              time: "2023年12月13日 12:00:00",
              status: "驳回",
            },
            {
              name: "有线电视续费",
              price: "252",
              year: 1,
              time: "2023年12月13日 12:00:00",
              status: "驳回",
            },
            {
              name: "有线电视续费",
              price: "252",
              year: 1,
              time: "2023年12月13日 12:00:00",
              status: "已确认",
            },
            {
              name: "有线电视续费",
              price: "252",
              year: 1,
              time: "2023年12月13日 12:00:00",
              status: "驳回",
            },
          ],
        };
      },
    });
  </script>
</html>
